<template>
  <div class="homegoodscover">
    <goods-cover bgc="#fff">
      <template>
        <goods-cover-item v-for="(item) in curGoods" :key="item.id" @click.native="detail(item)">
          <template #good_img>
            <div class="good_img">
              <img :src="item.img" alt />
            </div>
          </template>
          <template #good_name>
            <p class="good_name">{{item.gname}}</p>
          </template>
          <template #good_price>
            <p class="good_price">{{item.prices | showPrice}}</p>
          </template>
          <template #good_zan>
            <p class="good_zan">{{item.zan}}</p>
          </template>
        </goods-cover-item>
      </template>
    </goods-cover>
  </div>
</template>

<script>
import GoodsCover from "components/public/goods_cover/GoodsCover";
import GoodsCoverItem from "components/public/goods_cover/GoodsCoverItem";
export default {
  name: "HomeGoodsCover",
  props: {
    datas: {
      type: Object
    }
  },
  data() {
    return {
      goods: this.datas,
      cur: 1
    };
  },
  methods: {
    detail(item) {
      this.$router.push({
        path: `/good/${item.id}`,
        query: {
          categroy_base_id: item.categroy_base_id
        }
      });
    }
  },
  computed: {
    curGoods() {
      if (this.cur == 1) {
        return this.datas.type_one;
      } else if (this.cur == 2) {
        return this.datas.type_two;
      } else if (this.cur == 3) {
        return this.datas.type_three;
      }
    }
  },
  components: {
    GoodsCover,
    GoodsCoverItem
  },
  created() {
    this.$bus.$on("tabClick", curIndex => {
      this.cur = curIndex;
    });
  },

};
</script>

<style lang="less" scoped>
.goodscoveritem {
  width: 50%;
  padding: 2px 4px;
  .good_img {
    img {
      width: 100%;
      height: 300px;
      border-radius: 5px;
    }
  }
  .good_name {
    font-size: 16px;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .good_price {
    font-size: 16px;
    font-weight: 700;
  }
  .good_zan {
    padding-left: 15px;
    position: relative;
    vertical-align: middle;
  }
  .good_zan::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;

    position: absolute;
    top: 50%;
    transform: translateY(-55%);
    left: 0;
    background-image: url("~assets/images/icon/zan.svg");
    background-size: 100%;
  }
}
</style>